<template>
	<view class="userInfoEdit">
		<view class="userInfoEdit_haber" :style="{ paddingTop: (top+30) + 'px' }">
			<tui-navigation-bar maxOpacity="0" :titleSize="18" :titleLineHeight="18" :titlefontWeight="800"
				@init="initNavigation" title="编辑" backgroundColor="#fff" color="#000">
				<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
					<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
				</view>
			</tui-navigation-bar>
			<view class="userInfoEditTop"> </view>
		</view>
		<tui-landscape :show="landscapeShow" :closeIcon="false" :maskClosable="false" iconLeft="50rpx"
			iconRight="50rpx"> </tui-landscape>
		<view class="userInfoEdit_Content">
			<view class="img_header">
				<view class="img_opt_header">
					<image class="optImg" :src="ossUrl + (userDetails.avatar||'')" alt="" />
				</view>
				<image @tap="uploadImg" class="icon_camera" src="/static/tutor/message/icon_photo@2x.png" alt="" />
			</view>
			<view class="form_my">
				<view class="item_info">
					<view class="label_info">昵称</view>
					<view class="comp_info">
						<tui-input inputBorder radius="16" padding="22rpx 40rpx" :color="'rgba(102, 102, 102, 1)'"
							:size="28" :borderColor="'rgba(243, 230, 211, 1)'" isFillet :backgroundColor="'#FFFEF8'"
							placeholder="请输入昵称" v-model="userDetails.nickname"></tui-input>
					</view>
				</view>
				<view class="item_info">
					<view class="label_info">性别</view>
					<view class="comp_info">
						<view class="comp_infoSelect" @tap="showCategory=true">
							<view class="lt">
								{{ userDetails.gender==0?'男':'女'}}
							</view>
							<image class="rt" src="/static/tutor/message/icon_xiala@2x.png"></image>
						</view>
					</view>
				</view>
				<view class="item_info">
					<view class="label_info">手机号</view>
					<view class="comp_info">
						<tui-input inputBorder radius="16" padding="22rpx 40rpx" :color="'rgba(102, 102, 102, 1)'"
							:size="28" :borderColor="'rgba(243, 230, 211, 1)'" isFillet :backgroundColor="'#FFFEF8'"
							v-model="userDetails.phoneNumber"></tui-input>
					</view>
				</view>
				<view class="item_info">
					<view class="label_info">个性签名</view>
					<view class="comp_info">
						<tui-textarea height="200rpx" inputBorder radius="16" padding="22rpx 40rpx"
							:color="'rgba(102, 102, 102, 1)'" :size="28" :borderColor="'rgba(243, 230, 211, 1)'"
							isFillet :backgroundColor="'#FFFEF8'" v-model="userDetails.intro"></tui-textarea>
					</view>
				</view>

				<view class="item_info">
					<view class="label_info">
						邀请码
					</view>
					<view class="comp_info">
						<tui-input inputBorder radius="16" padding="22rpx 40rpx" :color="'rgba(102, 102, 102, 1)'"
							:size="28" :borderColor="'rgba(243, 230, 211, 1)'" isFillet :backgroundColor="'#FFFEF8'"
							v-model="userDetails.extendCode" :disabled="can_inv"></tui-input>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<tui-form-button :disabled="saveLoading" :loading="saveLoading" @click="saveShopInfo" margin="24rpx 0 0 0"
				radius="40rpx" :size="32" color="#fff" width="690rpx" height="84rpx" background="#2FD7D3">
				保存
			</tui-form-button>
		</view>
		<tui-picker :show="showCategory" :pickerData="categoryList" @hide="showCategory=false" @change="change">
		</tui-picker>
	</view>
</template>

<script>
	import Cache from "@/utils/cache";
	import {
		updateUserInfo
	} from "@/http/api/user/user.js"
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				marginTp: 0,
				ossUrl: getApp().globalData.ossurl,
				landscapeShow: false,
				saveLoading: false, //按钮加载
				showCategory: false,
				categoryList: [{
					text: "男",
					value: "0"
				}, {
					text: "女",
					value: "1"
				}],
				userDetails: {
					nickname: '',
					intro: '',
					avatar: '',
					gender: '',
					phoneNumber: '',
					id: '',
				}, //当前用户信息 
				can_inv: false
			}
		},
		onLoad(options) {
			this.getData()
		},
		methods: {
			initNavigation(e) {
				this.top = e.top;
				this.marginTp = e.height
			},
			getData() {
				this.userDetails = this.$store.state.userInfo
				if (this.userDetails.extendCode) {
					this.can_inv = true;
				}
			},
			//选择分类
			change: function(e) {
				//选择的分类结果
				console.log(e, e.value, '数据')
				this.userDetails.gender = e.value
			},
			back() {
				uni.navigateBack();
			},
			//上传商家主图
			uploadImg() {
				let _this = this;

				_this.landscapeShow = true
				uni.chooseImage({
					count: 1, //
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					mediaType: ['image'], //选择类型
					success: async (res) => {
						uni.showLoading({
							title: '上传中...'
						})
						console.log(res)

						_this.$utils.uploadFile(res.tempFiles[0], (imgInfo) => {
							console.log(imgInfo)
							if (imgInfo.statusCode == 200) {
								let dataImg = JSON.parse(imgInfo.data)
								_this.$utils.toast('上传成功')
								_this.$set(_this.userDetails, 'avatar', dataImg.data.fileName);
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none',
									duration: 2000
								});
							}
							uni.hideLoading()
							_this.landscapeShow = false
						}).catch(err => {
							console.log(err)
						})




					},
					complete: function(data) {
						uni.hideLoading()
						_this.landscapeShow = false
					}
				});
			},
			blobToFile(blob, fileName) {
				return new File([blob], fileName, {
					type: 'image/png'
				})
			},
			//保存教练编辑信息
			saveShopInfo() {
				this.saveLoading = true
				updateUserInfo({
						id: Cache.get('userId'),
						nickname: this.userDetails.nickname,
						intro: this.userDetails.intro,
						gender: this.userDetails.gender,
						phoneNumber: this.userDetails.phoneNumber,
						avatar: this.userDetails.avatar,
					}).then(res => {
						if (res.code === 200) {
							this.$utils.toast('编辑成功')
							this.$store.dispatch('getUserInfo');
							uni.navigateBack();
							console.log(res, '获取教练编辑成功的数据')
						}
					})
					.finally(() => {
						setTimeout(() => {
							this.saveLoading = false
						}, 500)
					})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import './myEditInfo.scss';
</style>